<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- <span>word</span> hello {{arr}} world
    <ul>
      <li>{{name}}</li>
    </ul> -->
    <div id="app" a="1" style="color: red; background: green">{{innerArr}} {{fullName}}</div>
    <script src="dist/vue.js"></script>
    <script>
      let vm = new Vue({
        el: "#app",
        data() {
          return {
            name: "zf",
            firstName: "zhu",
            lastName: "feng",
            arr: [1, 2, 3],
            innerArr: [[11, 22, 33]],
            a: {
              a: 1,
            },
          };
        },
        // 计算属性默认不执行 Object.defineProperty => getter
        // 多次取值如果依赖的值不变化，就不会重新执行
        // 依赖的值变化了。需要重新执行
        // dirty 表示这个值是不是脏了truye  取值后为false 依赖值变化 ditry => true
        computed: {
          // => Object.defineProperty() 取值
          fullName() {
            return this.firstName + this.lastName;
          },
          fullName2: {
            get() {
              console.log("fullName get");
              return this.firstName + this.lastName;
            },
            set(newValue) {
              console.log("fullName set", newValue);
            },
          },
        },
        watch: {
          // 用户watcher
          name(newVal, oldVal) {
            console.log("name changed", newVal, oldVal);
          },
          "a.a"(newVal, oldVal) {
            console.log("a.a changed", newVal, oldVal);
          },
        },
        // render(h) {
        //   return h("div", { class: "xxx" }, "hello");
        // },
      });

      setTimeout(() => {
        vm.name = "zs";
        vm.a.a = 2;
      });

      vm.$watch("name", (newVal, oldVal) => {
        console.log("name $watch changed", newVal, oldVal);
      });

      console.log('fullName', vm.fullName)
      console.log('fullName', vm.fullName)
      console.log('fullName', vm.fullName)
      console.log('fullName', vm.fullName)
      setTimeout(() => {
        vm.firstName = 'zhuzhu'  
        console.log('fullName change', vm.fullName)
      }, 1000);
    </script>
  </body>
</html>
